<template>
  <div class="info-rank" id="info-rank"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "InfoRank",
  props: {
    pictureAccount: {
      type: Number,
      default: () => 0
    },
    appAccount: {
      type: Number,
      default: () => 0
    },
    videoAccount: {
      type: Number,
      default: () => 0
    }
  },
  mounted() {
    const dom = document.querySelector("#info-rank");
    const myChart = echarts.init(dom);
    const option = {
      title: [
        {
          text: `信息发布排行`,
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
          left: "50%",
          top: 10,
          textAlign: "center"
        },
        {
          subtext: "图片",
          left: "8%",
          top: "83%",
          subtextStyle: {
            color: "#ff"
          }
        },
        {
          subtext: "应用",
          left: "46%",
          top: "83%",
          subtextStyle: {
            color: "#ff"
          }
        },
        {
          subtext: "视频",
          left: "84%",
          top: "83%",
          subtextStyle: {
            color: "#ff"
          }
        }
      ],
      series: [
        {
          name: "图片",
          type: "pie",
          radius: ["42%", "45%"],
          center: ["12%", "60%"],
          hoverAnimation: false,
          label: {
            normal: {
              position: "center"
            }
          },
          data: [
            {
              value: this.pictureAccount,
              name: String(this.pictureAccount) + "%",
              itemStyle: {
                normal: {
                  color: "#ff0000"
                }
              },
              label: {
                normal: {
                  textStyle: {
                    fontSize: 13,
                    fontWeight: "bold",
                    color: "#ff0000"
                  }
                }
              }
            },
            {
              value: 100 - this.pictureAccount,
              name: "占比",
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: "#989090"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          name: "应用",
          type: "pie",
          radius: ["42%", "45%"],
          center: ["50%", "60%"],
          hoverAnimation: false,
          label: {
            normal: {
              position: "center"
            }
          },
          data: [
            {
              value: this.appAccount,
              name: String(this.appAccount) + "%",
              itemStyle: {
                normal: {
                  color: "#e4bd15"
                }
              },
              label: {
                normal: {
                  textStyle: {
                    fontSize: 13,
                    fontWeight: "bold",
                    color: "#e4bd15"
                  }
                }
              }
            },
            {
              value: 100 - this.appAccount,
              name: "占比",
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: "#989090"
                }
              },
              label: {
                show: false
              }
            }
          ]
        },
        {
          name: "视频",
          type: "pie",
          radius: ["42%", "45%"],
          center: ["88%", "60%"],
          hoverAnimation: false,
          label: {
            normal: {
              position: "center"
            }
          },
          data: [
            {
              value: this.videoAccount,
              name: String(this.videoAccount) + "%",
              itemStyle: {
                normal: {
                  color: "#24d414"
                }
              },
              label: {
                normal: {
                  textStyle: {
                    fontSize: 13,
                    fontWeight: "bold",
                    color: "#24d414"
                  }
                }
              }
            },
            {
              value: 100 - this.videoAccount,
              name: "占比",
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: "#989090"
                }
              },
              label: {
                show: false
              }
            }
          ]
        }
      ]
    };
    myChart.setOption(option);
  }
};
</script>

<style scoped lang="less">
.info-rank {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 23.6vh;
}
</style>
